<!-- 希望没问题，等待测试，编辑按钮有些问题 -->
<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>老师管理</el-breadcrumb-item>
        <el-breadcrumb-item>老师信息</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="search">
        <label>教师号:<input type="text" placeholder="请输入教师号" v-model="teacherID"/></label>
        <label>姓名:<input type="text" placeholder="请输入姓名" v-model="name"/></label>
      </div>
      <el-table :data="tableData" :height="height">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="教师号">
                <span>{{ scope.row.teacherId }}</span>
              </el-form-item>
              <el-form-item label="姓名">
                <span>{{ scope.row.name }}</span>
              </el-form-item>
              <el-form-item label="性别">
                <span>{{ scope.row.sex }}</span>
              </el-form-item>
              <el-form-item label="年龄">
                <span>{{ scope.row.age }}</span>
              </el-form-item>
              <!-- <el-form-item label="班级">
                <span>{{ scope.row.classId }}</span>
              </el-form-item> -->
              <el-form-item label="学院">
                <span>{{ scope.row.collegeId }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="教师号" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.teacherId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.sex }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="班级" width="240">
          <template slot-scope="scope">
            <span>{{ scope.row.classId }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-sizes="[1, 2, 3]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="firstFrom.total">
        </el-pagination>
      <!-- 编辑表单弹窗 -->
      <el-dialog
        title="编辑老师信息"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
    <el-form-item label="教师号" prop="teacherId">
      <el-input v-model="ruleForm.teacherId"  :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="老师姓名" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="老师性别" prop="sex">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="老师年龄" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input>
    </el-form-item>
   <!--  <el-form-item label="老师班级" prop="classId">
      <el-input v-model="ruleForm.classId"></el-input>
    </el-form-item> -->
    <el-form-item label="老师学院" prop="collegeId">
      <el-input v-model="ruleForm.collegeId"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password"></el-input>
    </el-form-item>
  </el-form>
  
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="updateEdit(ruleForm)">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: "teacherInfo",
    data() {
      return {
        firstFrom:{
        // 用于保存初始的条数
        total:0,
        },
        title: "老师信息表",
        tableData: [],
        height: document.documentElement.clientHeight - 120,
        dialogFormVisible: false,
        formLabelWidth: "100px",
        pageFrom:{
          page: 1,
          pageSize: 3,
        },
        teacherID:'',
        name:'',
          // 修改数据的表单
        ruleForm: {teacherId:'',sex:'',name:'',age:'',collegeId:'',password:''},
        rules: {
          name: [{ required: true, message: "请填写老师姓名" }],
          sex: [{ required: true, message: "请选择老师性别" }],
          age: [{ required: true, message: "请填写老师年龄" }],
          collegeId: [{ required: true, message: "请填写老师学院号" }],
        },
      };
    },
    computed:{
             
          },
    methods: {
      // 数据分页
      handleCurrentChange(currentPage) {
        this.pageFrom.page = currentPage;
        this.getteacherTable()
        // 每次更改都要请求一次tabledata数据，在后端做数据分页！>.<！
      },
      handleSizeChange(size) {
        this.pageFrom.pageSize = size;
        this.getteacherTable()
        // 每次更改都要请求一次tabledata数据，在后端做数据分页！>.<！
      },
      // 获取老师信息表
      async getteacherTable() {
        const dataToSerialize = { ...this.pageFrom };
      if (this.teacherID) {
    dataToSerialize.teacherId=this.teacherID;
}
     if (this.name) {
    dataToSerialize.name=this.name;
     }
      // JSON化
      const config = {
        headers: {
          'Content-Type': 'application/json', // Custom request header
          'token':`${localStorage.getItem("token")}`
        }
      };
      try {
        const { data: res } = await this.$http.post(`api/admin/teacher/page`,JSON.stringify(dataToSerialize),config);
        if (res.status !== 500) {
          this.tableData=res.data.records;
        } else {
          this.$message.error('获取失败');
        }
      } catch (error) {
        // Handle request error
        console.error('Request Error:', error);
        this.$message.error('请求失败');
    }
      },
      // 获取老师初始信息
      async getFirstteacherTable() {
      // JSON化
      const config = {
        headers: {
          'Content-Type': 'application/json', // Custom request header
          'token':`${localStorage.getItem("token")}`
        }
      };
      try {
        const { data: res } = await this.$http.post(`api/admin/teacher/page`,JSON.stringify(this.pageFrom),config);
        if (res.status !== 500) {
          this.$message.success('成功获取老师的信息');
          this.tableData=res.data.records;
          this.firstFrom.total = res.data.total; // 保存总条数
        } else {
          this.$message.error('获取失败');
        }
      } catch (error) {
        // Handle request error
        console.error('Request Error:', error);
        this.$message.error('请求失败');
    }
      
      },
      //删除老师信息
      async deleteteacherInfo(ID) {
      // JSON化
      const config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded', // Custom request header
          'token':`${localStorage.getItem("token")}`
        }
      };
      try {
        const { data: res } = await this.$http.delete(`api/admin/teacher/delete?id=${ID}`,config);
        if (res.status !== 500) {
          this.$message.success('成功删除老师信息');
          // 重新调用获取表格的代码
          this.getteacherTable();
        } else {
          this.$message.error('删除失败');
        }
      } catch (error) {
        // Handle request error
        console.error('Request Error:', error);
        this.$message.error('删除失败');
    }
      },
      // 启动编辑功能
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.ruleForm = { ...row };
  
      },
      // 保存编辑按钮
      async updateEdit(params) {
        if (confirm("是否确认所编辑的内容！")){
      // JSON化
      const config = {
        headers: {
          'Content-Type': 'application/json', // Custom request header
          'token':`${localStorage.getItem("token")}`
        }
      };
      try {
        const { data: res } = await this.$http.put(`api/admin/teacher/update`,JSON.stringify(params),config);
        if (res.status !== 500) {
          this.$message.success('成功编辑老师信息');
          // 重新调用获取表格的代码
          this.getteacherTable();
          this.dialogFormVisible = false;
        } else {
          this.$message.error('编辑失败');
        }
      } catch (error) {
        // Handle request error
        console.error('Request Error:', error);
        this.$message.error('编辑1失败');
    }
  }
  },
      // 取消编辑按钮
      cancelEdit() {
        if (confirm("是否确认取消所编辑的内容！")) {
          this.dialogFormVisible = false;
        }
      },
      // 删除功能
      handleDelete(index, row) {
        if (confirm("是否确认删除？")) {
          this.deleteteacherInfo(row.teacherId);
        }
      },
    },
    created(){
      if(localStorage.getItem("type") !== 'admin'){this.$router.push(`/login`);this.$message.error('权限不够');}
  },
    mounted() {
       this.getFirstteacherTable();
    },
  };
  </script>
  
  <style lang="less" scoped>
  .search {
    background-color: #fff;
    padding:10px 5px;
    font-size:14px;
    text-align: right;
  }
  .search label {
    margin-right:30px;
  }
  .search input {
    margin-left:10px;
    width:160px;
    outline: none;
  }
  .el-breadcrumb {
    padding-bottom: 10px;
  }
  .el-table {
    width: 100%;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-left: 70px;
    margin-bottom: 0;
    min-width: 40%;
    max-width: 84%;
  }
  /deep/ .el-table .el-table__cell {
    padding: 8px 0;
  }
  /deep/ .el-dialog {
    margin-top: 10px !important;
  }
  /deep/.el-dialog__body {
    padding: 10px 20px !important;
    font-size: 12px !important;
  }
  /deep/.el-dialog__footer {
    padding: 0px 20px 10px !important;
  }
  </style>
  